<template>
    <div class="w-full h-full flex flex-col">
        <!-- 视图切换 -->
        <div class="flex m-1">
            <el-radio-group v-model="activeTabPath" @change="checkoutTab">
                <el-radio-button v-for="tab in tabs" :key="tab.path" :value="tab.path">
                    {{ tab.title }}
                </el-radio-button>
            </el-radio-group>
        </div>
        <div class="flex-1 overflow-hidden">
            <!-- 内容 -->
            <!-- <router-view></router-view> -->
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <component :is="Component" />
                </keep-alive>
            </router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useTabsStore } from '@/stores/tabs'
import { storeToRefs } from 'pinia'
import { RouterView } from 'vue-router'

// 顶部tab数据
const tabsStore = useTabsStore()
const { checkoutTab, tabs } = tabsStore
const { activeTabPath } = storeToRefs(tabsStore)
</script>

<style scoped></style>
